<template>
  <div
    ref="contentRefDom"
    class="flex-1 h-full overflow-y-auto flex flex-col justify-between duration-900 dark:bg-zinc-900 dark:text-gray-100"
  >
    <div class="flex-1 p-4 space-y-4">
      <!-- 留言板标题部分 -->
      <div class="flex items-center justify-between mb-4">
        <!-- 标题在左边 -->
        <h1 class="text-xl font-bold text-gray-700 dark:text-gray-200">
          留言板
        </h1>
        <!-- 自定义区域 -->
        <div class="text-sm text-gray-500 dark:text-gray-400">
          <span
            >你可以在这里提出你在网站中所遇到的Bug我们会定期查看留言板进行网站维护!</span
          >
        </div>
      </div>

      <!-- 留言列表 -->
      <div v-for="message in messages" :key="message.id" class="flex space-x-3">
        <!-- 用户头像 -->
        <img
          :src="message.avatar"
          alt="avatar"
          class="w-8 h-8 rounded-full shadow-md"
        />
        <!-- 留言内容 -->
        <div class="flex-1">
          <div
            class=" p-3 rounded-md shadow-md dark:bg-zinc-800 dark:text-gray-100"
          >
            <div class="flex items-center space-x-2">
              <p class="font-semibold text-sm text-gray-900 dark:text-gray-200">
                {{ message.username }}
              </p>
              <!-- QQ 账号标签 -->
              <span
                v-if="message.qq"
                class="text-xs text-zinc-500 px-2 py-1 rounded-sm"
              >
                QQ: {{ message.qq }}
              </span>
            </div>
            <p class="text-gray-600 dark:text-gray-400 text-sm">
              {{ message.content }}
            </p>
          </div>
          <span
            class="text-xs text-gray-500 dark:text-gray-400 mt-1 block text-right"
          >
            {{ message.date }}
          </span>
        </div>
      </div>
    </div>

    <!-- 输入框和发送按钮 -->
    <div
      class="flex w-full bottom-1 items-center rounded-sm shadow-md bg-gray-100 dark:bg-zinc-900"
    >
      <input
        type="text"
        v-model="inputMessage"
        placeholder="Type a message"
        class="flex-1 px-3 py-2 rounded-sm outline-none dark:text-gray-100 dark:bg-zinc-800 text-gray-800 w-full text-sm"
      />
      <button
        @click="sendMessage"
        class="bg-blue-500 dark:bg-blue-700 dark:text-gray-100 text-white px-3 py-2 rounded-sm ml-2 hover:bg-blue-600 transition duration-150 text-sm"
      >
        Send
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 模拟留言列表
const messages = ref([
  {
    id: 1,
    username: 'LYC',
    avatar:
      'https://beloved-1308416229.cos.ap-chengdu.myqcloud.com/images/avatar.jpg',
    content: '这是一条留言。',
    date: new Date().toLocaleString(),
    qq: '123456789' // 添加 QQ 账号
  },
  {
    id: 2,
    username: 'FlanChan',
    avatar:
      'https://cirno-1308416229.cos.ap-chengdu.myqcloud.com/user_avatar/1858051440458420226/gwKB6rMW-123949214_p0.jpg',
    content: '另一条测试留言！',
    date: new Date().toLocaleString(),
    qq: '987654321' // 添加 QQ 账号
  }
])

// 输入的留言内容
const inputMessage = ref('')

// 发送留言
const sendMessage = () => {
  if (inputMessage.value.trim() === '') {
    alert('留言内容不能为空！')
    return
  }

  const newMessage = {
    id: messages.value.length + 1,
    username: 'LYC',
    avatar:
      'https://beloved-1308416229.cos.ap-chengdu.myqcloud.com/images/avatar.jpg',
    content: inputMessage.value,
    date: new Date().toLocaleString(),
    qq: '123456789' // 新消息添加 QQ 账号
  }

  messages.value.push(newMessage)
  inputMessage.value = '' // 清空输入框
}
</script>

<style scoped>
/* 可选样式：自定义滚动条 */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-thumb {
  background-color: #cfd2d6;
  border-radius: 4px;
}
</style>
